<template>
  <div class="home">
    <van-nav-bar>
      <template #title>
        <div class="title">环球锦囊团</div>
      </template>
      <template #left>
        <van-dropdown-menu
          active-color="#2577e3"
          :overlay="false"
        >
          <van-dropdown-item
            v-model="getvalue1"
            :options="option1"
            @change="checkCountry"
          />
        </van-dropdown-menu>
      </template>
    </van-nav-bar>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      :show-indicators="false"
    >
      <van-swipe-item
        ><img
          src="../../homeimg/advertisingico.png"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../homeimg/advertisingico.png"
          alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img
          src="../../homeimg/advertisingico.png"
          alt=""
      /></van-swipe-item>
      <template #indicator>
        <div></div>
      </template>
    </van-swipe>
    <div class="hot-wraper">
      <div class="hot-title">
        <span class="title-left"></span>
        <span class="title-center">热门优惠</span>
        <span class="title-right"></span>
      </div>
      <div class="hot-content clearfix">
        <van-card
          v-for="item in array1.slice(0, 4)" :key="item.id"
          :desc="item.coupon_explain"
          :title="item.coupon_name"
          @click="getCoupon(item.id)"
        >
          <template #thumb>
            <img
              :src="item.coupon_ico_path"
              alt=""
            />
          </template>
        </van-card>
      </div>
      <a class="hot-footer">
        <router-link to="/more">
          <span class="footer-more">查看更多</span>
        </router-link>
        <span class="footer-btn"></span>
      </a>
    </div>
    <a
      href="javascript:;"
      class="tip"
    >
      <img
        src="../../homeimg/advertising.png"
        alt=""
      />
      <span class="ico"> </span>
    </a>
    <van-tabs
      v-model="activeName"
      title-active-color="#2577e3"
      color="#2577e3"
      line-width="50%"
    >
      <van-tab
        title="购物"
        name="a"
      >
        <div class="homebuy">
          <a
            href="https://m.sohu.com/a/122601424_495395/?pvid=000115_3w_a"
            class="feature-list"
          >
            <p class="shop-title">韩国购物常见问题，你遇到过几个？</p>
            <img
              src="../../homeimg/good1.jpg"
              alt=""
            />
          </a>
          <a
            href="https://m.3dmgame.com/gl/3840855.html"
            class="feature-list"
          >
            <p class="shop-title">黑暗之魂3防火女</p>
            <img
              src="../../homeimg/good2.jpg"
              alt=""
            />
          </a>
        </div>
      </van-tab>
      <van-tab
        title="退税"
        name="b"
        to=""
      >
        <div class="homebuy">
          <a
            href="https://m.sohu.com/a/122601424_495395/?pvid=000115_3w_a"
            class="feature-list"
          >
            <p class="shop-title">韩国购物常见问题，你遇到过几个？</p>
            <img
              src="../../homeimg/good3.jpg"
              alt=""
            />
          </a>
        </div>
      </van-tab>
    </van-tabs>
    <Tabbar></Tabbar>
  </div>
</template>
<script>
import Tabbar from '../components/tabbar';
import { mapState, mapGetters } from 'vuex';
export default {
  computed: {
    ...mapState({
      option1: (state) => state.checkCountry.option1,
      value1: (state) => state.checkCountry.value1,
      array1: (state) => state.checkCountry.array1,
    }),
    ...mapGetters(['getvalue1']),
    getvalue1: {
      get() {
        return this.value1;
      },
      set(val) {
        // console.log(val);
      },
    },
  },
  methods: {
    checkCountry(value) {
      this.$store.commit('checkCountry/checkCountry', value);
    },
    getCoupon(id){
      this.$store.commit('getCoupon/getCoupon',id)
    }
  },
  created() {
    this.checkCountry(0);
  },
  components: {
    Tabbar,
  },
  data() {
    return {
      activeName: 'a',
    };
  },
};
</script>
<style lang="scss">
html {
  background-color: #fafafa;
}
.clearfix:after {
  display: block;
  height: 0;
  clear: both;
  content: '';
}
.home {
  padding-bottom: 50px;
  // margin-bottom: 50px;
  .title {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -60px;
    width: 120px;
    text-align: right;
    line-height: 45px;
    font-size: 18px;
    color: #383838;
    background-image: url(../../homeimg/jinnangtuan.png);
    background-repeat: no-repeat;
    background-position: -7px 3px;
    background-size: 35px 35px;
  }
  .van-cell__title {
    text-align: center;
  }
  .van-cell {
    // display:block;
    width: 100%;
    justify-content: center;
    position: relative;
  }
  .van-cell__title,
  .van-cell__value {
    text-align: center;
    flex: none;
  }
  .van-cell__value {
    position: absolute;
    .van-icon {
      margin-left: 90px;
    }
  }
  .van-dropdown-menu__bar {
    box-shadow: none;
  }
  .van-dropdown-menu__title {
    color: #2577e3;
  }
  .my-swipe .van-swipe-item {
    height: 21px;
    margin-top: 1px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    img {
      height: 100%;
    }
  }
  .hot-wraper {
    background-color: #fff;
    .hot-title {
      display: flex;
      flex-wrap: wrap;
      height: 60px;
      line-height: 60px;
      span {
        // -webkit-box-flex: 1;
        flex: 1;
      }
      .title-left {
        background-image: url(../../homeimg/title_l.png);
        background-repeat: no-repeat;
        background-position: right 30px;
        background-size: 19px 1px;
        line-height: 60px;
      }
      .title-center {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #4d4d4d;
      }
      .title-right {
        background-image: url(../../homeimg/title_r.png);
        background-repeat: no-repeat;
        background-position: left 30px;
        background-size: 19px 1px;
      }
    }
    .hot-content {
      .van-card {
        display: block;
        float: left;
        width: 48%;
        margin: 0 1% 3% 1%;
        overflow: hidden;
        background-color: #fff;
        padding: 0;
        .van-card__header {
          flex-direction: column;
          .van-card__thumb {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .van-card__content {
            min-height: 0px;
            .van-card__title {
              height: 22px;
              overflow: hidden;
              font-size: 15px;
              font-weight: 600;
              color: #4d4d4d;
            }
            .van-card__desc {
              font-size: 12px;
              color: #b3b3b3;
            }
          }
        }
      }
    }
    .hot-footer {
      display: block;
      position: relative;
      left: 50%;
      margin-left: -65px;
      width: 130px;
      height: 40px;
      .footer-more {
        display: inline-block;
        position: absolute;
        width: 130px;
        height: 40px;
        background-image: url(../../homeimg/rectangle.png);
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 125px 35px;
        text-align: center;
        line-height: 35px;
        font-size: 13px;
        color: #2577e3;
      }
      .footer-btn {
        display: inline-block;
        position: absolute;
        right: 23px;
        top: 11px;
        width: 12px;
        height: 12px;
        background-image: url(../../homeimg/morearrows.png);
        background-repeat: no-repeat;
        background-size: 12px 12px;
      }
    }
  }
  .tip {
    display: block;
    position: relative;
    img {
      width: 100%;
    }
    .ico {
      display: block;
      position: absolute;
      bottom: 6px;
      left: 0;
      width: 22px;
      height: 11px;
      background-image: url(../../homeimg/advertisingico.png);
      background-repeat: no-repeat;
      background-size: 22px 11px;
    }
  }
  .van-tab__pane {
    background-color: #fff;
    .homebuy {
      margin: 0 10px;
      .feature-list {
        display: block;
        padding: 5px 0 0 0;
        .shop-title {
          margin: 5px 0 10px 0;
          line-height: 27px;
          font-size: 16px;
          font-weight: bold;
          color: #4d4d4d;
        }
        img {
          width: 200px;
        }
      }
    }
  }
}
</style>
